<template>
  <ProTable ref="proTable" :requestApi="getLogList" :columns="columns" :extraSearch="extraSearch" :toolButton="false">
    <!-- Expand -->
    <template #expand="scope">
      {{ scope.row.data }}
    </template>
    <template #add_time="scope">
      <span>{{ formatDate("Y-m-d H:i:s", scope.row.add_time) }}</span>
    </template>
    <!-- 表格操作 -->
    <template #operation="scope">
      <el-button type="primary" link :icon="Delete" @click="deleteAccount(scope.row)">删除</el-button>
    </template>
  </ProTable>
</template>
<script lang="ts" setup>
import {ref} from "vue";
import {getLogList, delLog} from "@/api/modules/log";
import {Delete} from "@element-plus/icons-vue";
import {useHandleData} from "@/hooks/useHandleData";
import {ColumnProps} from "@/components/ProTable/interface";
import ProTable from "@/components/ProTable/index.vue";
import {LogItem} from "@/api/interface/log";
import {formatDate} from "@/utils/util";

const proTable = ref();
const searchType = [
	{label: "操作URL", value: 1},
	{label: "用户昵称", value: 2},
	{label: "用户ID", value: 3}
]

const columns: Partial<ColumnProps>[] = [
	{
		type: "expand",
		label: "",
		width: 80
	},
	{
		prop: "action_name",
		label: "行为名称"
	},
	{
		prop: "uid",
		label: "用户ID",
		width: 120
	},
	{
		prop: "nickname",
		label: "用户昵称",
		width: 100
	},
	{
		prop: "url",
		label: "操作URL",
		width: 200
	},
	{
		prop: "add_time",
		label: "执行时间",
		width: 180
	},
	{
		prop: "operation",
		label: "操作",
		width: 130,
		fixed: "right"
	}
];
const extraSearch: Partial<ColumnProps>[] = [
	{
		prop: "type",
		label: "搜索类别",
		enum: searchType,
		searchType: 'select'
	},
	{
		prop: "keywords",
		label: "关键词"
	}
];

const deleteAccount = async (row: LogItem) => {
	await useHandleData(delLog, {id: row.id}, `删除当前日志`);
	proTable.value.refresh();
}
</script>
